<template>
  <div class="article-page">
    <nav class="my-nav van-hairline--bottom">
      <a href="javascript:;" @click="doSort('weight_desc')">推荐</a>
      <a href="javascript:;" @click="doSort('')">最新</a>
      <div class="logo"><img src="@/assets/logo.png" alt="" /></div>
    </nav>
    <!--
    把首页的  <vant-cell>内容封装到一个单独的组件中
    注意这里文件夹别放错了
    页面级组件：放入views文件夹
    盒子级组件：放入components文件夹

    注册成全局组件使用
    - 全局组件在main.js中注册

    `Article.vue`页面中
    全局组件一旦注册，任何地方直接使用
  -->
  <!-- 使用v-for渲染数据 -->
  <van-list
  v-model="loading"
  :finished="finished"
  finished-text="我也是有底线的!~~~~"
  @load="onLoad"
  >
  <!-- 面经item组件
  1.原生事件能用于原生标签,用在组件上可能会无效
  2.解决方案: 使用事件修饰符 native
  native作用 : 给组件绑定 原生dom事件
  -->
  <ArticleItem v-for="item in list" :key="item.id" :item="item"
  @click.native="$router.push(`/detail?id=${item.id}`)"
  ></ArticleItem>
  </van-list>
  <!--
    v-model:是否处于加载状态，加载过程中不触发load事件
    finished:是否已加载完成，加载完成后不再触发load事件
    finished-text:加载完成后的提示文案
    load事件:滚动条与底部距离小于 offset 时触发
   -->
  <!-- 分页组件list:https://vant-contrib.gitee.io/vant/v2/#/zh-CN/list -->
  <!-- 基础用法
  List 组件通过 loading 和 finished 两个变量控制加载状态，当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true。此时可以发起异步操作并更新数据，数据更新完毕后，将 loading 设置成 false 即可。若数据已全部加载完毕，则直接将 finished 设置成 true 即可。
   -->
  <!-- 组件中渲染ajax数据固定套路
   1. 给data添加数据
   2. 发送ajax请求
   3. 把服务器响应的数据绑定到data
   4. 使用插值或指令渲染数据
   对象就用插值
   数组就用v-for
   有子组件的就用props把数据传给子组件渲染 -->
  </div>
</template>

<script>
// 导入获取文章接口
import { getArticleList } from '@/api/article.js'

export default {
  name: 'article-page',
  // 1.data:数据
  data () {
    return {
      // 1.1 当前页  改为26页 方便测试页码数据都加载后的情况
      current: 26,
      // 1.2 每条页数
      pageSize: 10,
      // 1.3 排序类型 默认最新
      sorter: '',
      // 1.4 总数量
      total: 0,
      // 1.5 文章列表
      list: [],
      // 1.6 加载更多动画
      // 数据更新完毕后，将 loading 设置成 false 即可
      loading: false,
      // 1.7 是否已加载完成，加载完成后不再触发load事件
      // 若数据已全部加载完毕，则直接将 finished 设置成 true 即可。
      finished: false
    }
  },
  // 2.methods:方法
  methods: {
    // load事件:加载下一页
    // load事件:滚动条与底部距离小于 offset 时触发
    // 2.1 上拉加载更多时间
    async onLoad () {
      // 测试是否一开始就能加载数据 这是van-list的自带功能 可以代替created钩子
      console.log('1')
      // (1)获取文章列表
      // 发送ajax
      const data = await getArticleList({
        current: this.current,
        pageSize: this.pageSize,
        sorter: this.sorter
      })
      console.log(data)
      // 把服务器响应数据绑定到data
      // (2)绑定数据 /* 注意点:加载下一页后,不能替换.而是在原来数据上覆盖 */
      // this.list = data.data.rows
      this.list.push(...data.data.rows)
      this.total = data.data.total
      // (3)页码++
      this.current++
      // (4)设置loading为false : 关闭动画
      // 加载状态结束
      // 数据更新完毕后，将 loading 设置成 false 即可
      this.loading = false
      // (5)如果所有数据全部都加载完毕/完成,则设置finish为true
      if (data.data.rows.length === 0) {
        // 若数据已全部加载完毕，则直接将 finished 设置成 true 即可。
        this.finished = true
      }
    },
    // 2.2 切换推荐/最新
    // 2️⃣ doSort (sorter) {
    async doSort (sorter) {
      // (1)修改data数据
      this.sorter = sorter// 设置类型
      // (2)清空 页码+原数据
      this.current = 1// 排序条件变化，重新从第一页开始加载
      this.list = []
      // (3)发送请求
      // 手动开启动画 (让这个组件把里面dom清空，不然推荐和最新服务器给一样的数据会出现key重复提示)
      // 1️⃣
      // this.loading = true // 出现加载动画
      // 2️⃣
      // this.$nextTick(() => {
      //   this.onLoad()
      // })
      // 3️⃣
      // await this.$nextTick()

      this.onLoad() // 加载数据
    }
  },
  // 3.created:钩子
  async created () {
    /* 如下封装了 在上面 */
    // // (1)发送ajax
    // const data = await getArticleList({
    //   current: this.current,
    //   pageSize: this.pageSize,
    //   sorter: this.sorter
    // })
    // console.log(data)
    // // 把服务器响应数据绑定到data
    // this.list = data.data.rows
    // this.total = data.data.total
  }
}
</script>

<style lang="less" scoped>
.article-page {
  margin-bottom: 50px;
  margin-top: 44px;
  .my-nav {
    height: 44px;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: 999;
    background: #fff;
    display: flex;
    align-items: center;
    > a {
      color: #999;
      font-size: 14px;
      line-height: 44px;
      margin-left: 20px;
      position: relative;
      transition: all 0.3s;
      &::after {
        content: '';
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 0;
        width: 0;
        height: 2px;
        background: #222;
        transition: all 0.3s;
      }
      &.active {
        color: #222;
        &::after {
          width: 14px;
        }
      }
    }
    .logo {
      flex: 1;
      display: flex;
      justify-content: flex-end;
      > img {
        width: 64px;
        height: 28px;
        display: block;
        margin-right: 10px;
      }
    }
  }
}
.article-item {
  .head {
    display: flex;
    img {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      overflow: hidden;
    }
    .con {
      flex: 1;
      overflow: hidden;
      padding-left: 10px;
      p {
        margin: 0;
        line-height: 1.5;
        &.title {
          width: 280px;
        }
        &.other {
          font-size: 10px;
          color: #999;
        }
      }
    }
  }
  .body {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    margin-top: 10px;
  }
  .foot {
    font-size: 12px;
    color: #999;
    margin-top: 10px;
  }
}
</style>
